<template>
  <view class="invite-container">
    <view :class="['nav-container', bg]" v-if="topBar.style ==='custom'">
      <view class="status-contents" :style="{marginTop: topBar.statusBarHeight+'px'}">
        <image src="../../static/vip/icon_close.png" mode="widthFix" class="back" @click="toBack"></image>
        <text class="title">{{ title }}</text>
      </view>
    </view>
    <BannerView/>
    <view class="product_container" v-if="canPay && !isForeverVIP">
      <view v-for="(product, index) in vipProducts" :key="product.id" :class="['product', selectedProductIndex === index?'active':'']" @click="changeSelectProduct(index)">
        <image src="https://down.qwdata.vip/app_icon/1705061064393" mode="widthFix"
               v-if="kaobuguo && product.compensate"
               class="img-tuijian"/>
        <view class="title">{{ getProductTitle(product) }}</view>
        <view class="price">
          <view class="unit">￥</view>
          {{ product.fenPrice / 100 }}
          <view class="per">/{{ unit(product) }}</view>
        </view>
        <view class="oldPrice">原价{{ product.oldPrice / 100 }}</view>
        <view class="f1"></view>
        <view class="bottom">{{ productBottomTips(product) }}元/天</view>
      </view>
    </view>
    <view src="https://down.qwdata.vip/app_icon/icon_vip_discounts_1.png" v-if="canPay && vipProduct && !isForeverVIP"
          class="img-discounts">
      <view class="value">已省{{ (vipProduct.oldPrice - vipProduct.fenPrice) / 100 }}元</view>
    </view>
    <image :src="introduceImg"
           :class="['img-vip-container self-center', isForeverVIP && 's']" mode="widthFix"></image>
    <image src="https://down.qwdata.vip/app_icon/1703233273130" class="img-bottom" mode="widthFix"></image>
    <image src="https://down.qwdata.vip/app_icon/1703233292775" class="img-bottom" mode="widthFix"></image>
    <image src="https://down.qwdata.vip/app_icon/1703233280490" class="img-bottom" mode="widthFix"></image>

    <view class="vip-container">
<!--      <view class="coupon" v-if="canPay">
        <view class="info">
          <view class="text">活动结束恢复原价</view>
          <view class="time">{{ time[0] }}</view>
          <view>:</view>
          <view class="time">{{ time[1] }}</view>
          <view>:</view>
          <view class="time">{{ time[2] }}</view>
        </view>
      </view>-->
      <view class="single-btn" v-if="!canPay" @click="toJihuo">
        输入激活码，激活会员
      </view>
      <view class="single-btn" v-else-if="productBuyed">
        {{isForeverVIP ? '已开通永久会员' : ('已开通（' + endTimeFormat(productBuyed) + ' 到期）')}}
      </view>
      <view class="single-btn" @click="tryBuy" v-else>
        购买 {{ getProductTitle(vipProduct) }} ￥{{ vipProduct.price }}
      </view>
      <view class="tips">
        <radio :checked="agree" @click="agree=!agree" color="#3073f6" v-if="needCheckVipProtocol"
               style="transform:scale(0.5)"/>
        购买即表示同意
        <view class="link" @click="toVipProtocol">《驾考会员协议》</view>
      </view>
    </view>
    <AgreementVIPDialog ref="AgreementVIPDialog" v-if="needCheckVipProtocol"></AgreementVIPDialog>
    <Pay ref="pay" @success="onPaySuccess"></Pay>
    <LoginView ref="LoginView" page="vip" @login_success="onLoginSuccess"></LoginView>
    <BindPhoneDialog ref="BindPhoneDialog"></BindPhoneDialog>
    <WXPageBackIntercept ref="mpBack" @back="onMpBack"></WXPageBackIntercept>
    <VIPQuanyiDialog ref="VIPQuanyiDialog" @finish="toBack"></VIPQuanyiDialog>
    <Kemu1ProductDialog ref="Kemu1ProductDialog" @buyAllVip="toBuyAllVip" @buyKemu1Vip="tryPay"></Kemu1ProductDialog>
  </view>
</template>

<script>
import Pay from '@/components/Pay.vue'
import BindPhoneDialog from '@/components/BindPhoneDialog.vue'
import {commonApi, productApi} from '@/api'
import {mapGetters, mapActions} from 'vuex'
import WXPageBackIntercept from "@/components/WXPageBackIntercept.vue";
import AgreementVIPDialog from "@/components/LoginView/AgreementVIPDialog.vue";
import day from "@/vendor/day";
import VIPQuanyiDialog from "@/components/VIPQuanyiDialog.vue";
import LoginView from "@/components/LoginView/LoginView.vue";
import Kemu1ProductDialog from "@/components/Kemu1ProductDialog.vue";
import BannerView from "./BannerView";
import productUtils from "../../libs/productUtils";
import utils from "../../libs/utils";

export default {
  components: {
    BannerView,
    VIPQuanyiDialog,
    AgreementVIPDialog,
    Kemu1ProductDialog,
    Pay,
    LoginView,
    BindPhoneDialog,
    WXPageBackIntercept
  },
  data() {
    return {
      top: 0,
      bottom: 0,
      title: 'VIP',
      rewards: [],
      agree: false,
      second: 10 * 60,
      bg: '',
      selectedProductIndex: 0,
      interceptedCount: 0,
      from: ''
    }
  },
  computed: {
    ...mapGetters(['mine', 'loginBeforePay', 'appName', 'topBar', 'canPay', 'vipProducts', 'haveVIP', 'haveAuths', 'isAllVIP', 'isKemu1VIP', 'isKemu2VIP', 'isKemu3VIP', 'isKemu4VIP', 'platform', 'systemInfo', 'kaobuguo', 'splashBuy', 'isForeverVIP']),
    isLogin() {
      if (this.haveVIP) {
        return true
      }

      return this.haveAuths
    },
    vipProduct() {
      return this.vipProducts[this.selectedProductIndex]
    },
    introduceImg() {
      return productUtils.getIntroduceImg(this.vipProduct.id)
    },
    vipProductKemu() {
      if (!this.canPay) {
        return ''
      }
      if (!this.vipProduct) {
        return ''
      }
      return 'kemu' + this.vipProduct.kemu1 + this.vipProduct.kemu2 + this.vipProduct.kemu3 + this.vipProduct.kemu4
    },
    time() {
      return day().hour(0).minute(0).second(this.second).format('HH:mm:ss').split(':')
    },
    needCheckVipProtocol() {
      // #ifdef MP-WEIXIN
      return true
      // #endif

      // #ifndef MP-WEIXIN
      return false
      // #endif
    },
    productBuyed() {
      if (this.vipProduct.kemu1 && this.vipProduct.kemu2 && this.vipProduct.kemu3 && this.vipProduct.kemu4) {
        if (this['isAllVIP']) {
          return this.mine.vipEndAt1
        }
        return
      }
      if (this.vipProduct.kemu1) {
        if (this['isKemu1VIP']) {
          return this.mine.vipEndAt1
        }
        return
      }
      if (this.vipProduct.kemu2) {
        if (this['isKemu2VIP']) {
          return this.mine.vipEndAt2
        }
        return
      }
    }
  },
  onLoad({from=''}) {
    this.from = from
    this.top = this.systemInfo.statusBarHeight + 44
    this.title = this.appName + this.title
    uni.setNavigationBarTitle({title: this.title})
    /*this._handler = setInterval(() => {
      // console.log('second--', this.second)
      this.second--
      if (this.second < 0) {
        this.second = 59
        this.minute--
      }
    }, 1000)*/
  },
  destroyed() {
    console.log('destroy')
    // clearInterval(this._handler)
  },
  onPageScroll(e) {
    if (e.scrollTop >= this.top) {
      this.bg = 'black'
    } else {
      this.bg = ''
    }
  },

  onBackPress(args) {
    // console.log('onBackPress', args)

    if (args && args.from === 'backbutton') {
      if (this.$refs.VIPQuanyiDialog && this.$refs.VIPQuanyiDialog.isShowing()) {
        return true
      }
    }
    const intercept = this.interceptedBack()
    if (intercept) {
      return true
    }

    if (getCurrentPages().length === 1) {
      uni.switchTab({url: '/pages/home/home'})
      return true
    }
  },

  methods: {
    ...mapActions(['refreshUser']),
    isHuawei() {
      return utils.isHuawei()
    },
    getProductTitle(product) {
      return productUtils.getProductTitle(product)
    },
    changeSelectProduct(i) {
      this.selectedProductIndex = i
    },
    toBack() {
      uni.navigateBack()
    },
    toVipProtocol() {
      uni.navigateTo({
        url: '/pages/webview/webview?type=vip'
      })
    },

    tryBuy() {
      if (productUtils.isKemu1(this.vipProduct.id)) {
        this.$refs.Kemu1ProductDialog.open()
      } else {
        this.tryPay()
      }
    },
    toBuyAllVip() {
      this.selectedProductIndex = 0
      this.tryPay()
    },
    tryPay() {
      if (!this.isLogin && this.loginBeforePay) {
        this.$refs.LoginView.open()
      } else {
        this.$refs.pay.open({mode: 'product', from: 'vip', product: this.vipProduct})
      }
    },
    onLoginSuccess() {
      this.$refs.pay.open({mode: 'product', from: 'vip', product: this.vipProduct})
    },
    onMpBack(args) {
      const intercepted = this.interceptedBack(args)
      if (intercepted) {
        this.$refs.mpBack.setData(true)
      } else {
        uni.navigateBack()
      }
    },
    endTimeFormat(time) {
      return day(time).format('YYYY-MM-DD')
    },
    interceptedBack() {
      if (!this.canPay || this.isHuawei()) { //不能支付
        return false
      }

      if (this.mine.vipExpiredStr) {
        console.log('已经充过VIP不弹')
        return
      }
      if (this.interceptedCount > 0) {
        console.log('已经弹过，不弹')
        return
      }


      if (this.isAllVIP) {
        return
      }

      if (this.from === 'guid' && this.splashBuy === 3) {
        return
      }

      this.$refs.VIPQuanyiDialog.open()
      this.interceptedCount++
      return true
    },
    onPaySuccess() {
      this.refreshUser()

      if (!this.mine.phone) { // 支付成功，绑定手机号
        this.$refs.BindPhoneDialog.open('pay')
      }
    },
    productBottomTips(product) {
      let day = 0

      let perDay = 0

      if (product.vipDayUnit === 1) {
        perDay = 30
      } else if (product.vipDayUnit === 2) {
        perDay = 1
      } else if (product.vipDayUnit === 3) {
        perDay = 365
      }
      day = perDay * product.vipDayCount
      let num = (Math.floor(product.fenPrice / day) / 100)
      if (num < 0.01) {
        num = 0.01
      }
      return num
    },
    unit(product) {
      if (!product) {
        return ''
      }
      const unitList = ['', '个月', '天', '年']
      const str = product.vipDayCount + unitList[product.vipDayUnit]
      if (str === '99年') {
        return '终身'
      }
      return str
    },
    toJihuo() {
      uni.showModal({
        title: '输入激活码',
        editable: true,
        success: async (e) => {
          if (e.cancel) {
            return
          }
          console.log(e)
          if (!e.content || e.content.length < 5) {
            uni.showToast({
              icon: 'none',
              title: '请输入有效激活码'
            })
            return
          }
          try {
            await commonApi.activeVIP(e.content.trim())
            await this.refreshUser()
            uni.showToast({
              title: '激活成功！', icon: 'none', duration: 2000, mask: true
            })
          } catch (e) {
            uni.showToast({
              icon: 'none',
              title: e.message || '激活失败！'
            })
          }
        }
      })
    },
  }
}
</script>

<style lang="scss">
page {
  background-color: #ffffff;
}

.invite-container {
  display: flex;
  flex-direction: column;

  .img-vip-container {
    width: 690upx;
    height: 280upx;
    &.s {
      z-index: 1;
      margin-top: -80rpx;
    }
  }

  .img-bottom {
    width: 100vw;
  }

  .bg {
    width: 750rpx;
    height: 720rpx;
    background-image: url("https://down.qwdata.vip/app_icon/1699950812302");
    background-size: cover;
    display: flex;

    &.kemu1111 {
      background-image: url("@/static/vip/kaobuguo.png");

      .kemu1111body {
        flex: 1;
        text-align: center;
        display: flex;
        position: relative;

        .title_container {
          position: absolute;
          top: 100rpx;
          left: 0;
          right: 0;
          display: flex;
          flex-direction: column;
          align-items: center;

          .title {
            font-size: 40px;
            font-weight: bold;
            color: #fff;
          }


          @keyframes tiao {
            0% {
              padding: 15rpx 35rpx;
              font-size: 21px;
            }
            50% {
              padding: 10rpx 30rpx;
              font-size: 20px;
            }
            100% {
              padding: 15rpx 35rpx;
              font-size: 21px;
            }
          }

          .desc {
            font-size: 20px;
            font-weight: bold;
            color: #f65650;
            background-color: #f6efe2;
            padding: 10rpx 30rpx;
            border-radius: 100rpx;
            margin-top: 30rpx;

            &.tiao {
              animation: tiao 1000ms infinite;
            }
          }
        }
      }
    }

    ::v-deep .time_down_view {
      margin-top: 400rpx;
    }
  }

  .product {
    flex: 1;
    height: 224rpx;
    border-radius: 20rpx;
    margin-left: 20rpx;
    border: 2px solid #FFE2DA;
    background-color: #FFF7F5;
    margin-top: 30rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;

    &:last-child {
      margin-right: 30rpx;
    }

    &:first-child {
      margin-left: 30rpx;
    }

    .oldPrice {
      text-decoration: line-through;
      font-size: 11px;
      color: #999;
    }


    .bottom {
      background: #FFE2DA;
      height: 44rpx;
      width: 100%;
      text-align: center;
      border-bottom-left-radius: 10rpx;
      border-bottom-right-radius: 10rpx;
      font-size: 11px;
      color: #FF5346;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    @keyframes tiao2 {
      0% {
        transform: translateY(-5px);
      }
      50% {
        transform: translateY(0);
      }
      100% {
        transform: translateY(-5px);
      }
    }

    .img-tuijian {
      position: absolute;
      top: -25rpx;
      width: 180upx;
      z-index: 1;
      animation: tiao2 1000ms infinite;
    }


    .title {
      font-size: 12px;
      color: #161B1D;
      letter-spacing: 0;
      font-weight: bold;
      margin-top: 25rpx;
      margin-bottom: 5rpx;
    }

    .price {
      display: flex;
      font-size: 28px;
      color: #161B1D;
      font-weight: bold;
      align-items: baseline;

      .unit {
        font-size: 15px;
        font-weight: normal;
      }

      .per {
        font-size: 11px;
        font-weight: normal;
      }
    }

    &.active {
      border: 2px solid #FF5346;
      //transform: translateY(-15rpx);

      .price {
        color: #FF5346;
      }

      .bottom {
        background-color: #FF5346;
        color: #fff;
      }
    }
  }

  .nav-container {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 10;
    color: rgba(240, 173, 78, 0);

    &.black {
      background-color: #000;

      ::v-deep .title {
        color: #fff;
      }
    }

    ::v-deep .title {
      color: rgba(240, 173, 78, 0);
    }
  }

  .status-contents {
    height: 44px;
    box-sizing: border-box;
    padding: 20rpx 30rpx;
    display: flex;
    color: #fff;
    margin-top: var(--status-bar-height);

    .back {
      width: 52rpx;
      height: 52rpx;
      align-self: center;
    }

    .title {
      align-self: center;
      margin: 0 auto;
      font-size: 32rpx;
      font-weight: 500;
    }
  }

  .huiyuan-container {
    width: 750rpx;
    height: 380rpx;
    margin-top: 200rpx;
    position: relative;

    image {
      z-index: 1;
    }

    .btn {
      height: 68rpx;
      background-color: #1B000180;
      z-index: 5;
      color: #ffffff;
      position: absolute;
      bottom: 80rpx;
      margin-left: 70rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 40rpx;
      border-radius: 40rpx;
    }
  }

  .group-container {
    padding: 0 30rpx;
    margin-top: 90rpx;

    .title {
      display: flex;

      .label {
        font-size: 36rpx;
        font-weight: 500;
      }

      .tips {
        margin-top: 10rpx;
        color: #818181;
        font-size: 26rpx;
      }
    }
  }

  .product_container {
    white-space: nowrap; /* 关键：禁止换行 */
    width: 100%;
    height: 284rpx;
    z-index: 2;
    margin-top: -80rpx;
    display: flex;
  }

  .img-discounts {
    margin: 0 30rpx;
    width: 690rpx;
    margin-bottom: 30rpx;
    background-image: url("https://down.qwdata.vip/app_icon/icon_vip_discounts_1.png");
    height: 75rpx;
    background-size: cover;
    position: relative;

    .value {
      background-color: #f7f7f7;
      color: #e75d3f;
      font-size: 12px;
      right: 25rpx;
      height: 70rpx;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      width: 200rpx;
      text-align: right;
      position: absolute;
    }
  }

  .quanyi {
    margin-top: 0;

    .body {
      display: flex;
      margin-top: 50rpx;

      .item {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;

        .icon {
          width: 120rpx;
          height: 120rpx;
        }

        .ti500 {
          position: absolute;
          height: 44rpx;
          width: 114rpx;
          top: -20rpx;
          right: 20rpx;
        }

        .label {
          font-size: 26rpx;
          color: #191919;
        }

        .tips {
          font-size: 22rpx;
          color: #bfbfbf;
          margin-top: 8rpx;
        }
      }
    }
  }

  .yaoqinghuiyuan {
    .body {
      padding: 40rpx 0;
      margin-top: 30rpx;
      background-color: #fff;
      border-radius: 24rpx;

      .item {
        display: flex;
        flex-direction: column;
        flex: 1;
        justify-content: center;
        align-items: center;

        .icon {
          width: 92rpx;
          height: 92rpx;
          margin-bottom: 24rpx;
        }
      }

      .wx-btn {
        background-color: #06E06E;
        color: #fff;
        height: 100rpx;
        border-radius: 50rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 40rpx;
        margin-top: 52rpx;

        .icon {
          width: 46rpx;
          height: 37rpx;
          margin-right: 10rpx;
        }
      }

      .share {
        display: flex;

        .share-btn {
          flex: 1;
          color: #181d22;
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100rpx;
          margin-top: 40rpx;

          .icon {
            width: 40rpx;
            margin-right: 20rpx;
            height: 40rpx;
          }
        }
      }
    }
  }

  .yaoqinglist {
    background-color: #fff;
    border-radius: 24rpx;
    margin: 30rpx;
    overflow: hidden;

    .header {
      height: 92rpx;
      background-color: #313133;
      color: #fff;
      display: flex;

      .item {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    .body {
      background-color: #fff;
      min-height: 410rpx;

      .empty-text {
        font-size: 30rpx;
        font-weight: 500;
        text-align: center;
        padding-top: 160rpx;
      }

      .row {
        display: flex;
        border-bottom: 1px solid #EDEDED;

        .item {
          flex: 1;
          text-align: center;
          line-height: 95rpx;

          &.red {
            color: #FC323D;
          }
        }
      }
    }

    .list-footer {
      background-color: #fff;
      height: 92rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 22rpx;
      color: #5e5e5e;
      border-top: 1px solid #ededed;
    }
  }

  .kexue4 {
    .body {
      font-size: 0;
      margin-top: 30rpx;

      .icon {
        width: 335rpx;
        margin-bottom: 20rpx;
        height: 256rpx;
      }
    }
  }

  .changjianwenti {
    .body {
      margin-top: 30rpx;
      background-color: #fff;
      border-radius: 24rpx;
      padding: 40rpx 30rpx;

      .label {
        color: #1d1d1d;
        font-size: 30rpx;
        font-weight: 500;
        line-height: 1.75em;
      }

      .tips {
        line-height: 1.75em;
        color: #989898;
        margin-bottom: 20rpx;
      }
    }
  }

  .footer {
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    padding: 0 32rpx 40rpx 32rpx;
    box-sizing: border-box;
    z-index: 10;
    //height: 280rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 194rpx;
    display: flex;
    align-items: center;

    .continue-vip-btn {
      position: fixed;
      bottom: 50rpx;
      left: 30rpx;
      right: 30rpx;
      z-index: 100;
      height: 108rpx;
      line-height: 108rpx;
      font-weight: 500;
      font-size: 32rpx;
      background-color: #282f39;
      text-align: center;
      border-radius: 54rpx;
      color: #e9e1b1;
      box-shadow: 0 2px 10px #00000040;
    }

    .tips-bg {
      background-color: rgba(0, 0, 0, 0.6);
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 10;
      display: flex;
      justify-content: center;
    }

    .receive-result-tips {
      width: 584rpx;
      height: 262rpx;
      align-items: center;
      display: flex;
      flex-direction: column;
      position: fixed;
      bottom: 158rpx;
    }
  }

  .vip-container {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    padding: 0 24rpx;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 11;

    .coupon {
      width: 600rpx;
      height: 68rpx;
      background-size: contain;
      background-repeat: no-repeat;
      background-image: url("http://down.qwdata.vip/app_icon/1687058395381");
      position: absolute;
      z-index: 10;
      top: -50rpx;
      left: 70rpx;

      .info {
        position: absolute;
        right: 10rpx;
        color: #564624;
        top: 0;
        bottom: 0;
        display: flex;
        font-size: 12px;
        align-items: center;

        .time {
          background-color: #F44B40;
          width: 32rpx;
          height: 32rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 6rpx;
          color: #fff;
          font-size: 12px;
          margin-left: 10rpx;
          margin-right: 10rpx;
        }
      }
    }

    .single-btn {
      box-shadow: 0 2px 10px #00000040;
      display: flex;
      margin-top: 20rpx;
      border-radius: 16rpx;
      overflow: hidden;
      font-weight: bold;
      font-size: 18px;
      color: #FFFFFF;
      height: 108rpx;
      align-items: center;
      justify-content: center;
      background-image: linear-gradient(102deg, #FD861F 0%, #FF614C 99%);
      position: relative;
      margin-bottom: 32rpx;
    }

    .tips {
      display: flex;
      margin-bottom: 32rpx;
      color: #696969;
      font-size: 24rpx;
      justify-content: center;
      align-items: center;

      .link {
        color: #0a0d11;
      }
    }
  }
}
</style>
